<template>
    <div>
        <div class="search-con search-con-top">
            订单编号：
            <Input v-model="searchData.order_sn" style="width: 150px"></Input>
            用户编号：
            <Input v-model="searchData.mobile" style="width: 150px"></Input>
            时间：
            <Date-picker type="datetimerange" placeholder="选择日期和时间" style="width: 250px"
                v-model="searchData.create_time"></Date-picker>
            <Button @click="search" type="primary" icon="ios-search" style="margin-left: 10px;">搜索</Button>
            <Button @click="reset" type="success" icon="ios-refresh" style="margin-left: 10px;">重置</Button>
            <Button type="warning" style="margin-left: 10px;" @click="createOrder(false)">添加订单</Button>
        </div>
        <br>
        <Table :columns="columns" :data="list" @on-sort-change="customSort" :highlight-row="true" max-height="800" stripe
            border size="small">

            <template slot-scope="{ row , index}" slot="memberSlot">
                <Tooltip content="详情" style="margin-left: 10px;" placement="top">
                    <Icon type="md-bulb" size="18" color="#19be6b" style="cursor: pointer;" @click="shopDetail(row)" />
                </Tooltip>
                <Tooltip content="分配订单" style="margin-left: 20px;" placement="top">
                    <Icon type="md-flag" size="18" color="#ff9900" style="cursor: pointer;" @click="allotOrder1(row.id)" />
                </Tooltip>
            </template>
        </Table>
        <Paginate :total="total" @on-change="changePage" @on-page-size-change="changeSize">
        </Paginate>

        <!-- 订单详情 -->
        <Drawer title="详情" :closable="false" width="60" v-model="showDrawer">
            <List header="" footer="" size="small">
                <ListItem>订单编号：{{ orderInfo.order_sn }}</ListItem>
                <ListItem>设计需求：{{ orderInfo.design_need }}</ListItem>
                <ListItem>需求文档：<a :href="baseImgeUrl + orderInfo.design_need_file">点击下载</a></ListItem>
                <ListItem>补充需求：{{ orderInfo.replenish_need }}</ListItem>
                <ListItem>补充文档：<a :href="baseImgeUrl + orderInfo.replenish_need_file">点击下载</a></ListItem>
                <ListItem>销售：{{ orderInfo.sale_name }}</ListItem>
                <ListItem>开票对应公司：{{ orderInfo.invoice_company }}</ListItem>
                <ListItem>开票金额：{{ orderInfo.invoice_amount }}</ListItem>
                <ListItem>开票公司信息：{{ orderInfo.invoice_company_info }}</ListItem>
                <ListItem>开票人姓名：{{ orderInfo.invoice_name }}</ListItem>
                <ListItem>税号：{{ orderInfo.invoice_no }}</ListItem>
                <ListItem>注册地址：{{ orderInfo.invoice_address }}</ListItem>
                <ListItem>联系电话:{{ orderInfo.invoice_tel }}</ListItem>
                <ListItem>开户行：{{ orderInfo.invoice_bank }}</ListItem>
                <ListItem>开户行行号：{{ orderInfo.invoice_bank_code }}</ListItem>
                <ListItem>银行账号：{{ orderInfo.invoice_bank_card }}</ListItem>
                <ListItem>待收款返还金额：{{ orderInfo.due_in_refund == 1 ? orderInfo.refund_amount : 0 }}</ListItem>
                <ListItem>备注：{{ orderInfo.remark }}</ListItem>
                <ListItem>尾款：{{ orderInfo.residue_amount }}</ListItem>
                <ListItem>是否加急：{{ orderInfo.is_urgent == 0 ? '否' : '是' }}</ListItem>
            </List>
        </Drawer>


        <!-- 添加订单 -->
        <Modal title="订单信息" width="35" v-model="showAddOrderModal" @on-ok="submitOrder">
            <Form ref="formValidate" :model="orderItem" :label-width="90">
                <FormItem label="设计师">
                    <Select v-model="orderItem.design_id" filterable>
                        <Option v-for="item in designUserArr" :value="item.user_id" :key="item.user_id">{{ item.realname }}
                        </Option>
                    </Select>
                </FormItem>
                <FormItem label="销售">
                    <Select v-model="orderItem.sale_id" filterable>
                        <Option v-for="item in saleUserArr" :value="item.user_id" :key="item.user_id">{{ item.realname }}
                        </Option>
                    </Select>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
import config from "@/config";
import {
    getToken
} from "../../libs/util";
import Paginate from "@/components/paginate/paginate.vue";
const baseUrl = process.env.NODE_ENV === "development" ? config.baseUrl.dev : config.baseUrl.pro;
const baseImgeUrl = process.env.NODE_ENV === "development" ? config.baseImgUrl.dev : config.baseImgUrl.pro;
export default {
    name: "allotOrder",
    components: {
        Paginate,
    },
    data() {
        return {
            baseUrl: baseUrl,
            action_url: baseUrl + "/admin/image/uploadImg",
            headers: {
                Authorization: getToken()
            },
            baseImgeUrl: baseImgeUrl,
            // 列表
            columns: [{
                title: '订单编号',
                align: "center",
                key: 'order_sn',
            },
            {
                title: '用户编号',
                align: "center",
                key: 'mobile',
            },
            {
                title: '订单名称',
                align: "center",
                key: 'order_name',
            },

            {
                title: '支付金额',
                align: "center",
                key: 'order_amount',
            },
            {
                title: '待收款',
                align: "center",
                key: 'due_in_amount',
            },
            {
                title: '设计类型',
                align: "center",
                key: 'design_type_name',
            },
            {
                title: '业务类型',
                align: "center",
                key: 'business_type_name',
            },
            {
                title: '设计师',
                align: "center",
                key: 'design_name',
            },
            {
                title: '设计项目',
                align: "center",
                key: 'program_name',
            },
            {
                title: '交稿时间',
                align: "center",
                key: 'delivery_time',
            },
            {
                title: '订单状态',
                align: "center",
                key: 'order_status_txt',
            },

            {
                title: '创建时间',
                align: "center",
                key: 'create_time',
            },
            {
                title: '操作',
                align: "center",
                key: 'make',
                slot: 'memberSlot',
            },
            ],
            // 数据
            list: [],
            total: 0,
            searchData: {
                page: 1,
                limit: 10,
            },
            showDrawer: false,
            orderInfo: {},
            orderItem: {
                id: 0,
            },
            // 添加订单
            file: null,
            file1: null,
            showAddOrderModal: false,
            businessArr: [],
            designArr: [],
            fieldArr: [],
            programArr: [],
            designUserArr: [],
            saleUserArr: [],
            orderFieldArr: [],
            orderStatusList: [],
            payTypeArr: [],
        }
    },
    methods: {
        getList() {
            this.$axios('/admin/allot_order/getList', this.searchData).then(res => {
                this.list = res.data;
                this.total = res.total;
            });
        },
        search() {
            this.searchData.page = 1;
            this.getList();
        },
        reset() {
            this.searchData = {
                page: 1,
                limit: 10,
            };
            this.getList();
        },
        changePage(page) {
            this.searchData.page = page;
            this.getList();
        },
        changeSize(size) {
            this.searchData.limit = size;
            this.getList();
        },
        customSort(column, key, order) {
            this.searchData.order_by = column.key;
            this.searchData.sort = column.order;
            this.getList();
        },
        shopDetail(row) {
            this.orderInfo = { ...row };
            this.showDrawer = true;
        },
        allotOrder1(id) {
            this.orderItem.id = id;
            this.getDesignUserArr();
            this.getSaleUserArr();
            this.showAddOrderModal = true;
        },
        getDesignUserArr() {
            this.$axios('/admin/user/getDesignUserArr').then(res => {
                this.designUserArr = res;
            })
        },
        getSaleUserArr() {
            this.$axios('/admin/user/getSaleUserArr').then(res => {
                this.saleUserArr = res;
            })
        },
        submitOrder() {
            this.$axios('/admin/allot_order/save', this.orderItem).then(res => {
                this.$Message.success('执行成功');
                this.showAddOrderModal = false;
                this.getList();
            })
        },
        handleSuccess(res, file) {
            if (res.data == 0) {
                this.$Message.error(res.msg);
                return;
            }
            this.file = file;
            this.$set(this.orderItem, 'design_need_file', res.data.src)
        },
        handleSuccess1(res, file) {
            if (res.data == 0) {
                this.$Message.error(res.msg);
                return;
            }
            this.file1 = file;
            this.$set(this.orderItem, 'replenish_need_file', res.data.src)
        },
        handleFormatError(file) {
            this.$Notice.warning({
                title: "文件格式错误",
                desc: "不支持该文件类型",
            });
        },
    },
    created() {
        this.getList();
    }
}
</script>
